<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: longhunpomie
  Date: 2022/11/7
  Time: 7:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <%
    String basePath = request.getScheme() + "://" +
            request.getServerName() +
            ":" + request.getServerPort() +
            request.getContextPath() + "/";
    pageContext.setAttribute("basePath", basePath);
  %>
  <meta charset="utf-8" />
  <title>浏览</title>
  <link rel="stylesheet" href="../../static/lib/editor.md-master/examples/css/style.css" />
  <link rel="stylesheet" href="../../static/lib/editor.md-master/css/editormd.css" />
  <link rel="shortcut icon" href="../../static/img/logo_chzu1.png" type="image/x-icon" />
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/2.3.1/css/bootstrap.min.css">

  <script type="text/javascript">
    function updateContent(){
      let content = $("#blogContent").val();//通过id获取<textarea>标签中编辑的内容
      let blogHead = $("#blogHead").val();
      var firstTag = $("#firstTag").val();
      var secondTag = $("#secondTag").val();
      var thirdTag = $("#thirdTag").val();
      if(firstTag == secondTag || secondTag == thirdTag || firstTag == thirdTag){
        alert("标签不可以相同！");
        return false;
      }
      $.ajax({
        type:"post",
        url:"${basePath}/blog/updateBlog",//更新数据的接口
        dataType: "json",
        /*data:"content="+content+"&blogHead="+blogHead+"&name=${requestScope.user.name}",*/ //注入问题导致字符串截断
        data:{content:content, blogHead:blogHead, name:"${requestScope.user.name}", id:${requestScope.blog.id}, firstTag:firstTag, secondTag:secondTag, thirdTag:thirdTag},
        success:function(data){
          if(data==1){
            alert("修改成功");
          }else{
            alert("修改失败");
          }
        },
      });
    }
    function deleteBlog(){
      if(confirm("确认要删除吗？"))
      window.location.href="${basePath}/blog/deleteBlog?id=${requestScope.blog.id}&flag=true";
    }

    function deleteComment(id){
      if(confirm("确认要删除此评论吗？")){
        $.ajax({
          type:"post",
          url:"${basePath}/comment/deleteComment",
          dataType: "json",
          data:{id:id},
          success:function(data){
            if(data == 1)
              alert("删除评论成功");
            else
              alert("删除失败");
          },
        });
      }
    }

    function addOrDeleteCollect(flag, blogId){
      if(flag == false && ${sessionScope.user.name != null} && ${sessionScope.user.name != requestScope.user.name}){
        if(!confirm("确定收藏吗？")){
          return false;
        }
        $.ajax({
          type:"post",
          url:"${basePath}/blog/collected",//收藏按钮
          dataType: "json",
          data:{userId:${sessionScope.user.id}, blogId:blogId},
          success:function(data){
          },
          error:function () {
            alert("错误");
          }
        });
        document.getElementById("collect").style.display="none";
        document.getElementById("collect-active").style.display="block";
      }else if(flag == true){
        if(!confirm("确定取消收藏吗？")){
          return false;
        }
        $.ajax({
          type:"post",
          url:"${basePath}/blog/decollected",//取消点赞接口
          dataType: "json",
          data:{userId:${sessionScope.user.id}, blogId:blogId},
          success:function(data){
          },
          error:function () {
            alert("错误");
          }
        });
        document.getElementById("collect").style.display="block";
        document.getElementById("collect-active").style.display="none";
      }else if(${sessionScope.user.name == null}){
        window.location.href="${basePath}/user/toLogin";
      }else if(${sessionScope.user.name == requestScope.user.name}){
        alert("自己不可以给自己收藏哦");
      }
    }

    function addOrDeleteFollow(flag, followUserId){
      if(flag == false && ${sessionScope.user.name != null} && ${sessionScope.user.name != requestScope.user.name}){
        if(!confirm("确定关注吗？")){
          return false;
        }
        $.ajax({
          type:"post",
          url:"${basePath}/user/subscribe",//收藏按钮
          dataType: "json",
          data:{userId:${sessionScope.user.id}, followUserId:followUserId},
          success:function(data){
          },
          error:function () {
            alert("错误");
          }
        });
        document.getElementById("follow").style.display="none";
        document.getElementById("follow-active").style.display="inline";
      }else if(flag == true){
        if(!confirm("确定取消关注吗？")){
          return false;
        }
        $.ajax({
          type:"post",
          url:"${basePath}/user/unsubscribe",//取消点赞接口
          dataType: "json",
          data:{userId:${sessionScope.user.id}, followUserId:followUserId},
          success:function(data){
          },
          error:function () {
            alert("错误");
          }
        });
        document.getElementById("follow").style.display="inline";
        document.getElementById("follow-active").style.display="none";
      }else if(${sessionScope.user.name == null}){
        window.location.href="${basePath}/user/toLogin";
      }else if(${sessionScope.user.name == requestScope.user.name}){
        alert("自己不可以给自己关注哦");
      }
    }

    function addOrDeleteLike(flag, id){
      if(flag == false && ${sessionScope.user.name != null} && ${sessionScope.user.name != requestScope.user.name}){
        $.ajax({
          type:"post",
          url:"${basePath}/blog/addLike",//点赞接口
          dataType: "json",
          data:{id:id, userId:${sessionScope.user.id}},
          success:function(data){
          },
        });
        document.getElementById("like").style.display="none";
        document.getElementById("like-active").style.display="block";
        document.getElementById("numofLike").innerHTML=${requestScope.blog.likes} + 1;
        document.getElementById("numofLike").style.color="rgb(252, 85, 49)";
      }else if(flag == true){
        $.ajax({
          type:"post",
          url:"${basePath}/blog/deleteLike",//取消点赞接口
          dataType: "json",
          data:{id:id, userId:${sessionScope.user.id}},
          success:function(data){
          },
        });
        document.getElementById("like").style.display="block";
        document.getElementById("like-active").style.display="none";
        document.getElementById("numofLike").innerHTML=${requestScope.blog.likes};
        document.getElementById("numofLike").style.color="rgb(153, 154, 170)";
      }else if(${sessionScope.user.name == null}){
        window.location.href="${basePath}/user/toLogin";
      }else if(${sessionScope.user.name == requestScope.user.name}){
        alert("自己不可以给自己点赞哦");
      }
    }
  </script>
</head>
<body>
<div id="layout">
  <header>
    <h1>浏览<c:if test="${not empty requestScope.user.headImg}">
      <img src="${basePath}user/img?name=${requestScope.user.name}" style="width: 50px;height:50px;border-radius: 50%;" alt="">
    </c:if>
      <c:if test="${empty requestScope.user.headImg}">
        <img src="../../static/img/defaultHeadImg3.png" style="width: 50px;height:50px;border-radius: 50%;" alt="">
      </c:if>
      ${requestScope.blog.userName}的博客
      <c:if test="${requestScope.isFollowed == true}">
        <img src="../../static/img/已关注.png" style="display:inline;" onclick="addOrDeleteFollow(true, ${requestScope.blog.userId})" id="follow-active"/>
        <img src="../../static/img/关注.png" style="display:none;" onclick="addOrDeleteFollow(false, ${requestScope.blog.userId})" id="follow"/>
      </c:if>
      <c:if test="${requestScope.isFollowed == false}">
        <img src="../../static/img/关注.png" style="display:inline;" onclick="addOrDeleteFollow(false, ${requestScope.blog.userId})" id="follow"/>
        <img src="../../static/img/已关注.png" style="display:none;" onclick="addOrDeleteFollow(true, ${requestScope.blog.userId})" id="follow-active"/>
      </c:if>
    </h1>
    <c:if test="${requestScope.blog.userName == sessionScope.user.name}">
      <button id="save" class="" type="button" onclick="updateContent()" style="width: 100px;height: 50px;">保存修改</button>
      <input type="text" name="blogHead" id="blogHead" placeholder="请输入标题" style="height: 50px" value="${requestScope.blog.blogHead}">
      <img src="../../static/img/delete.png" onclick="deleteBlog()" style="width: 30px; height: 30px" align="right">
      <jsp:include page="../../pages/common/Tag.jsp"></jsp:include>
    </c:if>
    <c:if test="${requestScope.blog.userName != sessionScope.user.name}">
      <input type="text" name="blogHead" id="blogHead" placeholder="请输入标题" style="height: 50px" value="${requestScope.blog.blogHead}" readonly="readonly">
    </c:if>
    <span style="color: grey">${requestScope.time}</span>
    <c:if test="${sessionScope.user.name != null && requestScope.user.name != sessionScope.user.name}">
      <span style="color: grey" id="browsesNum">阅读：${requestScope.blog.browsesNum + 1}</span>
    </c:if>
    <c:if test="${sessionScope.user.name == null || requestScope.user.name == sessionScope.user.name}">
      <span style="color: grey" id="browsesNum">阅读：${requestScope.blog.browsesNum}</span>
    </c:if>
    <span class="label badge-success"><a style="color:white;" href="${basePath}/tag/classification?Tag=${requestScope.blog.firstTag}">${requestScope.blog.firstTag}</a></span>
    <span class="label badge-info"><a style="color:white;" href="${basePath}/tag/classification?Tag=${requestScope.blog.secondTag}">${requestScope.blog.secondTag}</a></span>
    <span class="label badge-warning"><a style="color:white;" href="${basePath}/tag/classification?Tag=${requestScope.blog.thirdTag}">${requestScope.blog.thirdTag}</a></span>
    <span>
      <c:if test="${requestScope.isCollected == true}">
        <img src="../../static/img/collect-true.png" style="width:30px; height:30px;display:block;" onclick="addOrDeleteCollect(true, ${requestScope.blog.id})" id="collect-active" align="right"/>
        <img src="../../static/img/collect-false.png" style="width:30px; height:30px;display:none;" onclick="addOrDeleteCollect(false, ${requestScope.blog.id})" id="collect" align="right"/>
      </c:if>
      <c:if test="${requestScope.isCollected == false}">
        <img src="../../static/img/collect-false.png" style="width:30px; height:30px;display:block;" onclick="addOrDeleteCollect(false, ${requestScope.blog.id})" id="collect" align="right"/>
        <img src="../../static/img/collect-true.png" style="width:30px; height:30px;display:none;" onclick="addOrDeleteCollect(true, ${requestScope.blog.id})" id="collect-active" align="right"/>
      </c:if>
    </span>
    <span>
      <img src="../../static/img/newHeart2021Active.png" style="width:30px; height:30px;display:none;" onclick="addOrDeleteLike(true, ${requestScope.blog.id})" id="like-active" align="right"/>
      <img src="../../static/img/newHeart2021White.png" style="width:30px; height:30px;display:block;" onclick="addOrDeleteLike(false, ${requestScope.blog.id})" id="like" align="right"/>
      <span id="numofLike" style="float: right;color: rgb(153, 154, 170);">${requestScope.blog.likes}</span>
    </span>
  </header>
  <div id="test-editormd">
                <textarea id="blogContent" style="display:none;">${requestScope.blog.blogContent}
</textarea>
  </div>
</div>
<script src="../../static/lib/editor.md-master/examples/js/jquery.min.js"></script>
<script src="../../static/lib/editor.md-master/editormd.js"></script>
<script type="text/javascript">
  var testEditor;
  $(function() {
    testEditor = editormd("test-editormd", {
      width   : "100%",
      height  : 800,
      syncScrolling : "single",
      path    : "../../static/lib/editor.md-master/lib/",
      tocm : true, // Using [TOCM]
      tex : true, // 开启科学公式TeX语言支持，默认关闭
      flowChart : true, // 开启流程图支持，默认关闭
      imageUpload : true,
      imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
      imageUploadURL : "${basePath}/editor/upload",
      emoji:true,
      toolbar:${requestScope.blog.userName == sessionScope.user.name},
      onload:function() { //根据用户显示修改操作
        this.previewing();
        var editor = this.editor;
        if(${requestScope.blog.userName != sessionScope.user.name})
        editor.find("." + this.classPrefix + "preview-close-btn").hide();

        if(${not empty sessionScope.user.name} && ${requestScope.user.name != sessionScope.user.name}){
          $.ajax({
            type:"post",
            url:"${basePath}/blog/addBrowseNum",
            dataType: "json",
            data:{id : ${requestScope.blog.id},  userId : ${sessionScope.user.id == null ? 0 : sessionScope.user.id}},
            success:function(data){
            },
          });
        }
      }
    });
    testEditor = editormd("test-editormd2", {
      placeholder:"支持markdown语法",
      width   : "50%",
      height  : 100,
      syncScrolling : "single",
      path    : "../../static/lib/editor.md-master/lib/",
      tocm : true, // Using [TOCM]
      watch:false,
      tex : true, // 开启科学公式TeX语言支持，默认关闭
      flowChart : true, // 开启流程图支持，默认关闭
      emoji:true,
      toolbarIcons : function() {
        return ["emoji"];
      },
    });
    var len = document.getElementById("test-editormd3_2").getAttribute("count");
    for(var i = 2; i <= len + 1; i ++){
      testEditor = editormd("test-editormd3_" + i, {
        width   : "100%",
        height  : 100,
        syncScrolling : "single",
        path    : "../../static/lib/editor.md-master/lib/",
        toolbar:false,
        emoji:true,
        onload:function() { //根据用户显示修改操作
          this.previewing();
          var editor = this.editor;
          editor.find("." + this.classPrefix + "preview-close-btn").hide();
        }
      });
    }

    $("#sub_btn").click(function () {
      var commentContent = $("#commentContent1").val();
      if (commentContent == null || commentContent == "") {
        alert("不可以提交空的评论哦");
        return false;
      }
    });
  });
</script>
<script type="text/javascript">
  function addOrDeleteCommentLike(flag, id, likes){
    if(flag == false && ${sessionScope.user.name != null}){
      $.ajax({
        type:"post",
        url:"${basePath}/comment/addCommentLike",//点赞接口
        dataType: "json",
        data:{id:id},
        success:function(data){
        },
      });
      document.getElementById("commentlike" + id).style.display="none";
      document.getElementById("commentlike-active" + id).style.display="block";
      document.getElementById("commentnumofLike" + id).innerHTML=likes + 1;
      document.getElementById("commentnumofLike" + id).style.color="rgb(252, 85, 49)";
    }else if(flag == true){
      $.ajax({
        type:"post",
        url:"${basePath}/comment/deleteCommentLike",//取消点赞接口
        dataType: "json",
        data:{id:id},
        success:function(data){
        },
      });
      document.getElementById("commentlike" + id).style.display="block";
      document.getElementById("commentlike-active" + id).style.display="none";
      document.getElementById("commentnumofLike" + id).innerHTML=likes;
      document.getElementById("commentnumofLike" + id).style.color="rgb(153, 154, 170)";
    }else if(${sessionScope.user.name == null}){
      window.location.href="${basePath}/user/toLogin";
    }
  }
</script>
<c:if test="${not empty sessionScope.user.headImg}">
  <hr style="color:grey;"/>
  <h1>写评论</h1>
  <img src="${basePath}user/img?name=${sessionScope.user.name}" style="width: 50px;height:50px;border-radius: 50%;" alt="">
  <form action="${basePath}/comment/writeComment" method="post">
    <input name="userName" type="hidden" value="${sessionScope.user.name}">
    <input name="blogId" type="hidden" value="${requestScope.blog.id}">
    <div id="test-editormd2">
      <textarea name="commentContent" id="commentContent1" style="display:none;"></textarea>
    </div>
    <input type="submit" value="提交评论" id="sub_btn" class="btn">
  </form>
</c:if>
<hr style="color:grey;"/>
<h1>评论区</h1>
<c:if test="${not empty requestScope.comments}">
  <span align="right"><a href="${basePath}/blog/showBlog?id=${requestScope.blog.id}&isFa=true">热门</a>|<a href="${basePath}/blog/showBlog?id=${requestScope.blog.id}">正序</a></span>
</c:if>
<c:if test="${empty requestScope.comments}">
  <h3 style="color: red;">评论区还没有评论哦! 快去发言吧</h3>
</c:if>
<c:forEach items="${requestScope.comments}" var="comment" varStatus="index">
  <hr style="color:grey;"/>
  <c:if test="${comment.value.value == false}">
    <img src="${basePath}user/img?name=${comment.key.userName}" style="width: 50px;height:50px;border-radius: 50%;" alt="" align="left">
  </c:if>
  <c:if test="${comment.value.value == true}">
    <img src="../../static/img/defaultHeadImg3.png" style="width: 50px;height:50px;border-radius: 50%; background-position: left" alt="">
  </c:if>
  <span style="color: #00c4ff; display: block" align="left">${comment.key.userName}</span><span style="display: block" align="left">&nbsp;${comment.value.key}</span><span align="left">&nbsp;${index.count + 1}楼</span>
  <span>
      <img src="../../static/img/newHeart2021Active.png" style="width:30px; height:30px;display:none;" onclick="addOrDeleteCommentLike(true, ${comment.key.id}, ${comment.key.likes})" id="commentlike-active${comment.key.id}" align="right"/>
      <img src="../../static/img/newHeart2021White.png" style="width:30px; height:30px;display:block;" onclick="addOrDeleteCommentLike(false, ${comment.key.id}, ${comment.key.likes})" id="commentlike${comment.key.id}" align="right"/>
      <span id="commentnumofLike${comment.key.id}" style="float: right;color: rgb(153, 154, 170);">${comment.key.likes}</span>
      <c:if test="${sessionScope.user.name == requestScope.user.name ||  sessionScope.user.name == comment.key.userName}">
        <img src="../../static/img/delete.png" onclick="deleteComment(${comment.key.id})" style="width: 25px; height: 25px" align="right">
      </c:if>
  </span>
  <div id="test-editormd3_${index.count + 1}" count=${requestScope.comments.size()}>
    <textarea style="display:none;">${comment.key.commentContent}</textarea>
  </div>
</c:forEach>
<c:if test="${not empty requestScope.recommendBlog}">
  <h1>推荐</h1>
  <div class="container-fluid">
    <div class="row-fluid">
      <div class="span12">
        <c:forEach items="${requestScope.recommendBlog}" var="blog" begin="0" end="4">
          <li class="span2" style="height: 600px; width: 175px;">
            <div class="thumbnail">
              <c:if test="${blog.value.value.key.headImg != null}">
              <img src="${basePath}user/img?name=${blog.key.userName}" style="width: 250px; height: 180px;border-radius: 50%;"/>
              </c:if>
              <c:if test="${blog.value.value.key.headImg == null}">
              <img src="../../static/img/defaultHeadImg3.png" style="width: 250px; height: 180px;border-radius: 50%;" alt=""/>
              </c:if>
              <div class="caption" >
                <h4 style="color: blue">
                    ${blog.key.userName}
                </h4>
                <span style="color: grey">${blog.value.key}</span>
                <span style="color:darkolivegreen;">&nbsp;&nbsp;浏览数:<font style="color: red">${blog.key.browsesNum}</font></span>
                <h3>
                    ${blog.key.blogHead}
                </h3>
                <p style="display: -webkit-box;   overflow: hidden;   white-space: normal!important;   text-overflow: ellipsis;   word-wrap: break-word;   -webkit-line-clamp: 5;   -webkit-box-orient: vertical;">
                    ${blog.key.blogContent}
                </p>
                <p>
                  <a class="btn btn-primary" href="${basePath}/blog/showBlog?id=${blog.key.id}">浏览</a> <img src="../../static/img/CommentImg.png">${blog.value.value.value}</img><img src="../../static/img/like.png" style="width: 35px; height: 35px">${blog.key.likes}</img>
                </p>
              </div>
          </li>
        </c:forEach>
      </div>
    </div>
  </div>
</c:if>
<jsp:include page="../../pages/common/footer.jsp"></jsp:include>
</body>
</html>
